<template>
  <div class="app-container">
    <div class="header">
      <h1>🌟 星座运势查询 🌟</h1>
      <p class="subtitle">输入您的姓名和生日，查看今日运势</p>
    </div>

    <div class="main-content">
      <el-card class="form-card" shadow="hover">
        <h2>个人信息</h2>
        <el-form 
          :model="form" 
          :rules="rules" 
          ref="formRef" 
          label-width="80px"
          size="large"
        >
          <el-form-item label="姓名" prop="name">
            <el-input 
              v-model="form.name" 
              placeholder="请输入您的姓名"
              prefix-icon="User"
            />
          </el-form-item>
          
          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="请选择您的生日"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button 
              type="primary" 
              @click="submitForm"
              :loading="loading"
              size="large"
              style="width: 100%"
            >
              <span v-if="!loading">查看我的运势</span>
              <span v-else>正在计算中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <transition name="fade">
        <el-card v-if="result.greeting" class="result-card" shadow="hover">
          <div class="result-content">
            <div class="zodiac-sign">
              <h3>{{ result.zodiacSign }}</h3>
              <div class="zodiac-icon">{{ getZodiacIcon(result.zodiacSign) }}</div>
            </div>
            
            <div class="greeting">
              <el-alert
                :title="result.greeting"
                type="success"
                :closable="false"
                show-icon
              />
            </div>
            
            <div class="fortune-detail">
              <h4>详细运势</h4>
              <p class="fortune-text">{{ result.fortune }}</p>
            </div>
          </div>
        </el-card>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const formRef = ref()
const loading = ref(false)

const form = reactive({
  name: '',
  birthday: ''
})

const result = reactive({
  greeting: '',
  zodiacSign: '',
  fortune: ''
})

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  birthday: [
    { required: true, message: '请选择生日', trigger: 'change' }
  ]
}

const zodiacIcons = {
  '白羊座': '♈',
  '金牛座': '♉',
  '双子座': '♊',
  '巨蟹座': '♋',
  '狮子座': '♌',
  '处女座': '♍',
  '天秤座': '♎',
  '天蝎座': '♏',
  '射手座': '♐',
  '摩羯座': '♑',
  '水瓶座': '♒',
  '双鱼座': '♓'
}

const getZodiacIcon = (sign) => {
  return zodiacIcons[sign] || '⭐'
}

const submitForm = async () => {
  if (!formRef.value) return
  
  try {
    const valid = await formRef.value.validate()
    if (!valid) return
    
    loading.value = true
    
    const response = await axios.post('/api/horoscope', {
      name: form.name,
      birthday: form.birthday
    })
    
    if (response.data.success) {
      result.greeting = response.data.data.greeting
      result.zodiacSign = response.data.data.zodiacSign
      result.fortune = response.data.data.fortune
      
      ElMessage.success('运势查询成功！')
    } else {
      ElMessage.error(response.data.message || '查询失败')
    }
    
  } catch (error) {
    console.error('查询错误:', error)
    ElMessage.error('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.header {
  text-align: center;
  color: white;
  margin-bottom: 40px;
}

.header h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.subtitle {
  font-size: 1.2em;
  opacity: 0.9;
}

.main-content {
  max-width: 600px;
  margin: 0 auto;
}

.form-card {
  margin-bottom: 30px;
  border-radius: 15px;
}

.form-card h2 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  font-size: 1.5em;
}

.result-card {
  border-radius: 15px;
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.result-content {
  text-align: center;
}

.zodiac-sign {
  margin-bottom: 25px;
}

.zodiac-sign h3 {
  font-size: 1.8em;
  margin-bottom: 10px;
}

.zodiac-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

.greeting {
  margin-bottom: 25px;
}

.greeting :deep(.el-alert) {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 10px;
}

.greeting :deep(.el-alert__title) {
  color: #333;
  font-weight: bold;
}

.fortune-detail h4 {
  font-size: 1.3em;
  margin-bottom: 15px;
  color: #fff;
}

.fortune-text {
  font-size: 1.1em;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 10px;
  margin: 0;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

:deep(.el-form-item__label) {
  font-weight: bold;
  color: #333;
}

:deep(.el-button--primary) {
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  border-radius: 25px;
  padding: 15px 30px;
  font-size: 1.1em;
  font-weight: bold;
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(45deg, #764ba2, #667eea);
}

:deep(.el-input__wrapper) {
  border-radius: 10px;
}

:deep(.el-date-editor) {
  border-radius: 10px;
}
</style> 